<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Wave Embed Example</title>
    <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
    
    <style type="text/css">
      body {
        font-family: arial, verdana, sans-serif;
      }
      
      #container {
        background: #fafafa;
        border: 1px solid #748F8A;
        height: 100%;
        padding: 10px;
        width: 100%;
      }
      
      #wrapper {
        color: #333333;
        height: 350px;
        margin: 0px auto;
        width: 500px;
      }
    </style>
    
    <script type="text/javascript">

    var waveUrl = 'https://wave.google.com/wave/';
    var waveId = 'googlewave.com!w+bvQu5APyA';
    var waveContainer, waveConfig;
    
    var waves = [];
    waves[0] = ['bvQu5APyA','Education','#eeeeee', '#748F8A', 'Arial', '10pt'];
    waves[1] = ['bvQu5APyD','Environment','#003399', '#99ccff', 'Georgia', '11pt'];
    waves[2] = ['bvQu5APyF','Health Care','#00ff66', '#333333', 'Courier', '12pt'];
    waves[3] = ['bvQu5APyH','Technology','#252525', '#ffffff', 'Arial', '11pt'];
    
    function load() {
      waveContainer = new WavePanel(waveUrl);
      waveContainer.setUIConfig('#eeeeee', '#748F8A', 'Arial', '10pt');
      waveContainer.loadWave(waveId);
      waveContainer.init(document.getElementById('container'));
      renderSelect();
    }
    
    function loadNewWave(id) {
      var waveId = 'googlewave.com!w+' + waves[id][0];
      waveContainer = new WavePanel(waveUrl);
      waveContainer.setUIConfig(waves[id][2], waves[id][3], waves[id][4], waves[id][5]);
      waveContainer.loadWave(waveId);
      document.getElementById('container').innerHTML = '';
      waveContainer.init(document.getElementById('container'));
    }
    
    function renderSelect() {
      selectHtml = '<select onChange="loadNewWave(this.options[this.selectedIndex].value);">';
      for (var i = 0; i < waves.length; i++) {
        selectHtml += '<option value="' + i + '">';
        selectHtml += waves[i][1] + '</option>';
      }
      selectHtml += '</select>';
      document.getElementById('selection').innerHTML = selectHtml;
    }
    
    function addViewer() {
      if (waveContainer) {
        waveContainer.addParticipant();
        alert('You have been added to this wave.');
      }
    }
    
    </script>
    
  </head>
  <body onLoad="load()">
    <div id="wrapper">
      <h2>Wave Embed Example #2</h2>
  	  <h3>Switching Waves and Adding a Participant</h3>
  	  Select a wave:
  	  <div id="selection"></div>
  	  <div id="addMe">
  	    <input type="button" id="addMeButton" value="Join this wave" onClick="addViewer();" />
  	  </div>
      <div id="container"></div>
    </div>
  </body>
</html>